import { FormCard } from '@components/FormCard'
import { FormUpload } from '@components/FormUpload'
import ImagePreview from '@components/ImagePreview'
import { useFormCallback } from '@hooks/useFormCallback'
import { useCaseCreateMutation, useCaseUpdateMutation } from '@services/cases'
import { Link } from '@tanstack/react-router'
import { Breadcrumb, Button, DatePicker, Form, Input, InputNumber, Switch } from 'antd'
import dayjs from 'dayjs'
import { useEffect, useState } from 'react'

/**
 * @param {object} defaultData
 * @returns
 */
export default function FormCase({ defaultData }) {
  const [data, setData] = useState(defaultData)
  const [attchments, setAttachments] = useState(defaultData.links || [])

  const [form] = Form.useForm()
  const { mutate } = defaultData.id ? useCaseUpdateMutation() : useCaseCreateMutation()
  const { onFinish, onFailed } = useFormCallback(mutate, {
    handle(values) {
      return {
        ...values,
        ...(defaultData.id && { id: defaultData.id }),
        links: attchments,
        published_at: dayjs(values.published_at).format('YYYY-MM-DD HH:mm:ss'),
      }
    },
  })

  useEffect(() => {
    form.setFieldsValue({ ...defaultData, published_at: dayjs(defaultData.published_at) })
  }, [])

  return (
    <FormCard
      card={{
        title: (
          <Breadcrumb
            items={[
              { title: '客户案例' },
              { title: <Link to={'..'}>案例管理</Link> },
              { title: defaultData.id ? '编辑' : '新增' },
            ]}
          />
        ),
      }}>
      <Form
        name="form-case"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        style={{ maxWidth: '100%' }}
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFailed}
        autoComplete="off">
        <Form.Item
          label="案例名称"
          name="title"
          rules={[{ required: true, message: '请输入标题' }]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="案例封面"
          name="image"
          rules={[{ required: true, message: '请上传封面图' }]}>
          <ImagePreview
            aspect="11:5"
            url={data.image}
            onChange={(resp) => {
              setData((prev) => ({ ...prev, image: resp.url }))
              form.setFieldsValue({ image: resp.url }) //触发表单更新
            }}
          />
        </Form.Item>

        <Form.Item
          label="服务类型"
          name="service"
          rules={[{ required: true, message: '请输入服务类型' }]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="公司名称"
          name="company"
          rules={[{ required: true, message: '请输入公司名称' }]}>
          <Input />
        </Form.Item>
        <Form.Item
          className="w-full"
          label="案例内容"
          name="content"
          rules={[{ required: true, message: '请输入内容!' }]}>
          <Input.TextArea rows={5} />
        </Form.Item>

        <Form.Item label="上传附件" name="links" width={'206px'}>
          <FormUpload btnText="上传附件" filelist={attchments} onChange={setAttachments} />
        </Form.Item>

        <Form.Item label="排　　序" name="orderby" width={'206px'}>
          <InputNumber className="w-[206px]!" min={0} />
        </Form.Item>
        <Form.Item label="是否隐藏" name="hide">
          <Switch checkedChildren="隐藏" unCheckedChildren="显示" />
        </Form.Item>
        <Form.Item label="发布时间" name="published_at">
          <DatePicker className="w-[206px]!" />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            保 存
          </Button>
        </Form.Item>
      </Form>
    </FormCard>
  )
}
